<template>
  <div>
    <div class="app-container" v-loading.fullscreen.lock="fullscreenLoading">
<!--      <el-button type="primary" size="mini" style="width: 60px" @click="closePage">返回</el-button>-->
      <div style="margin-top: 15px;margin-bottom: 15px;">
        <span style="font-size: 20px;color: #00afff;"><b>{{ whtview ? '填报' : '查看填报详情' }}</b></span>
      </div>
      <div style="background-color: white;padding: 15px 15px 15px 15px">

        <el-button v-if="!whtview"  type="primary" endicon="el-icon-plus" size="mini" style="width: 60px" @click="closure">返回</el-button>

        <el-form ref="form" :model="formdata" :disabled="!whtview">
          <el-row>
            <div v-if="whtview">
              <el-col style="margin-top: 15px" :span="10">
                <el-input :disabled="true" placeholder="请输入内容" v-model="formdata.schoolNaem">
                  <template slot="prepend"><span style="color: black">学校名称：</span></template>
                </el-input>
              </el-col>
              <el-col :span="4"><p></p></el-col>
              <el-col v-if="!this.whtview" style="margin-top: 15px" :span="10">
                <el-form-item style="margin-left: 10px" label="填报时间：">
                  <el-date-picker type="datetime" v-model="formdata.time" format="yyyy-MM-dd HH:mm:ss"
                                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择日期选择" :style="{width: '60%'}"
                                  clearable/>
                </el-form-item>
              </el-col>
              <el-col v-else style="margin-top: 15px" :span="10">
                <el-form-item label="截至时间：" style="margin-left: 10px">
                  <el-date-picker type="datetime" v-model="formdata.fillTimeLimit" format="yyyy-MM-dd HH:mm:ss"
                                  value-format="yyyy-MM-dd HH:mm:ss" :disabled="true" placeholder="请选择日期选择"
                                  :style="{width: '60%'}"
                                  clearable/>
                </el-form-item>
              </el-col>
              <el-col style=" margin-top: 15px" :span="10">
                <el-input :disabled="true" placeholder="请输入内容" v-model="formdata.formname">
                  <template slot="prepend"><span style="color: black">表单名称：</span></template>
                </el-input>
              </el-col>
              <el-col :span="4"><p></p></el-col>
              <el-col style="margin-top: 15px" :span="10">
                <el-form-item label="填报人员：" prop="fillinperson"
                              :rules="{required: true, message: '姓名不能为空', trigger: 'blur'}">
                  <el-input :style="{width: '60%'}" v-model="formdata.fillinperson" placeholder="请输入姓名"/>
                </el-form-item>
              </el-col>
            </div>

            <div v-else>
              <el-col style="margin-top: 20px" :span="24">
                <span><b>{{ formdata.formname }}——{{ formdata.schoolNaem }}</b></span>
              </el-col>
              <el-col style="margin-top: 10px;" :span="24">
                <div style="height: 1px;background-color: #afafaf"/>
              </el-col>
              <el-col style="margin: 15px 0px;" :span="6">
                <span style="font-size: 14px;color: #666666">填报时间：{{ formdata.time }}</span>
              </el-col>
              <el-col style="margin: 15px 0px;" :span="6">
                <span style="font-size: 14px;color: #666666">填报人：{{ formdata.fillinperson }}</span>
              </el-col>
            </div>

            <div v-for="(domain, index) in formdata.formlist" :key="index">
              <el-col v-if="!whtview" :space="24">
                <div style="background-color: #EDF1F2;padding: 20px 20px;margin-top: 10px">
                  <div>
                      <span style="color: #333333 ;font-size: 16px">
                  {{ index + 1 + "." + domain.title }}
                </span>
                  </div>
                  <div style="padding-left: 10px;margin-top: 6px">
                    <div v-for="(domainy, indey) in formdata.formlist[index].optionlist" :key="indey+''+index">
                      <div v-if="domainy.checked" style="margin-top: 10px">
                        <span style="color: #333333;font-size: 14px">回复：{{ domainy.option }}</span>
                        <br>
                        <span v-if="domainy.reason" style="color: #333333;font-size: 14px">原因：{{
                            domainy.reasontext
                          }}</span>
                      </div>
                    </div>
                    <div v-if="domain.type!==1" style="margin-top: 10px">
                      <span style="color: #333333;font-size: 14px">回复：{{ domain.reply }}</span>
                    </div>
                  </div>
                </div>
              </el-col>

              <div v-else>
                <el-col :space="24" style="margin: 20px 0px"><span
                  style="color: #333333 ;font-size: 15px"><b>{{ index + 1 + "." + domain.title }}</b></span></el-col>
                <div v-if="domain.type===1" style="margin-left: 20px">
                  <el-radio-group style="width: 100%" v-model="formdata.formlist[index].group"
                                  @input="radiogroup($event,index)" class="ml-4">
                    <div v-for="(domainy, indey) in formdata.formlist[index].optionlist" :key="indey+''+index">
                      <el-col style="margin: 10px 0" :span="24">
                        <el-radio :label="indey" size="large"><span
                          style="color: #333333">{{ indey + 1 + '.' + domainy.option }}</span></el-radio>
                      </el-col>
                      <el-col style="margin-bottom: 10px" :span="11" v-if="domainy.reason&&domainy.checked">
                        <el-form-item label="原因:"
                                      :prop="'formlist['+index+'].optionlist['+indey+'].reasontext'"
                                      :rules="{required: true, message: '原因不能为空', trigger: 'blur'}">
                          <el-input
                            type="textarea"
                            :rows="3"
                            :maxlength="300"
                            show-word-limit
                            style="width: 80%"
                            v-model="domainy.reasontext"
                            placeholder="请输入原因">
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </div>
                  </el-radio-group>
                </div>
                <div v-else style="margin-left: 20px">
                  <el-col :span="10">
                    <el-form-item :prop="'formlist['+index+'].reply'"
                                  :rules="{required: true, message: '回答不能为空', trigger: 'blur'}">
                      <el-input
                        type="textarea"
                        :rows="3"
                        :maxlength="300"
                        show-word-limit
                        v-model="domain.reply"
                        placeholder="请输入回答"/>
                    </el-form-item>
                  </el-col>
                </div>
              </div>
            </div>
          </el-row>
        </el-form>
        <el-row>
          <el-col v-if="whtview" style="margin-top: 20px" :span="24">
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <!--                <el-button v-if="whtview" @click="resetForm('form')">重置</el-button>-->
            <el-button @click="closure">关闭</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {details, addReply} from "@/api/patrol/form";

export default {
  name: "see",
  data() {
    return {
      text: 0,
      whtview: true,
      fullscreenLoading: false,
      formdata: {
        schoolNaem: '测试',
        formFillingId: this.$route.query.formdataid,
        formname: '测试',
        time: null,
        fillTimeLimit: null,
        fillinperson: '测试',
        formlist: [ /*{
          title: '测试™',
          type: 1,
          number: 0,
          key: 4,
          reply: '',
          optionlist: [
            {
              option: '测试选项',
              reason: true,
              checked: false,
              reasontext: 'false',
              key: 1,
            }
          ],
        }, {
          title: '测试™',
          type: 1,
          number: 0,
          key: 3,
          optionlist: [
            {
              option: '测试选项',
              reason: true,
              reasontext: 'false',
              checked: false,
              key: 2,
            },
            {
              option: '测试选项',
              reason: true,
              reasontext: 'false',
              checked: false,
              key: 2,
            }
          ],
        }, {
          title: '测试™',
          type: 1,
          number: 0,
          key: 2,
          optionlist: [
            {
              option: '测试选项',
              reason: false,
              reasontext: 'false',
              checked: false,
              key: 3,
            }
          ],
        }, {
          title: '测试简答',
          type: 2,
          number: 0,
          key: 2,
          optionlist: [
            {
              option: '测试选项',
              reason: true,
              reasontext: 'false',
              checked: false,
              key: 4,
            }
          ],
        }*/
        ]
      }
    };
  },
  created() {
    this.fullscreenLoading = true;
    this.getList();
    this.whtview = (this.$route.params && this.$route.params.if) !== 'check'
  },
  methods: {
    /** 查询单列表 */
    getList() {
      details(this.$route.query.formdataid).then(response => {
        var data = response.data;
        console.log(data)
        this.formdata.formname = data.ptFormDetailVo.formTitle;
        this.formdata.fillinperson = data.updateBy;
        this.formdata.schoolNaem = data.schoolName;
        this.formdata.time = data.fillTime;
        this.formdata.formlist = data.ptFormDetailVo.formlist
        this.formdata.fillTimeLimit = data.fillTimeLimit
        this.formdata.formId = data.formId
        this.fullscreenLoading = false;
      });
    },
    radiogroup(index, indey) {
      this.formdata.formlist[indey].optionlist.forEach(value => value.checked = false)
      this.formdata.formlist[indey].optionlist[index].checked = true
    },
    submitForm(formName) {
      try {
        this.formdata.formlist.forEach((value, index) => {
          var x = 0;
          if (value.optionlist != null) {
            value.optionlist.forEach(value1 => {
              if (!value1.checked)
                x++
            })
            if (x === value.optionlist.length && value.type === 1) {
              this.$message.error('第' + (index + 1) + '题还未作答');
              throw new Error();
            }
          }
        })
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fullscreenLoading = true;
            addReply(this.formdata).then(response => {
              this.fullscreenLoading = false;
              this.$message.success("提交成功");
              this.closure();
            }).catch(reason => {
              this.fullscreenLoading = false;
            })
          } else {
            this.$message.error("有问题未作答或填报人员未填写")
            return false;
          }
        });
      } catch (e) {
        console.log(e)
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    checkEndTime(rule, value, callback) {
      if (!value) {
        callback(new Error("请选择时间"));
      }
    },
    closure() {
      this.$tab.closePage();
      if (!this.$route.query.source)
        this.$tab.refreshPage({path: "/form/viewschool/" + this.formdata.formId, name: "form"})
      else this.$tab.refreshPage({path: "/form/fillin", name: "form"})
    },
    //关闭页面
    closePage() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$tab.openPage("填报", "/form/fillin");
    }
  },
};
</script>

<style scoped>
.app-container {
  background-color: #edf1f2;
  padding: 10px;
  min-height: calc(100vh - 35px)
}

::v-deep.pagination-container .el-pagination {
  text-align: center;
  position: sticky;
}

::v-deep.el-form-item {
  margin-bottom: 0;
}
</style>
